{extend name="public/base"/} {block name="body"}
<link rel="stylesheet" type="text/css" href="__PUBLIC__/xsd/css/checkout.css" />
 <!-- <script type="text/javascript" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>
 <script>
   $(function(){
    var geolocation = new qq.maps.Geolocation("QQ6BZ-24HC6-ZAXSZ-MTZAU-5MU2J-HEFEH", "鲜果屋");
     geolocation.getIpLocation(showPosition, showErr)

   })

   function showPosition(position) {
     console.log(1111);
     $.getJSON("{:url('index/cart/changecookie')}", {name: 'positioninit', 'val': position.lat+','+position.lng}, function(json, textStatus) {});
  };
   function showErr() {
     console.log('定位失败');
   };
 </script> -->
 
 <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" charset="utf-8"></script>

<script>

    wx.config({$wxoptions|json_encode});

    wx.error(function(e){

      	console.log(e);

      });
 wx.ready(function(){
    wx.getLocation({
    type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
    success: function (res) {
        var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
        var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
        var speed = res.speed; // 速度，以米/每秒计
        var accuracy = res.accuracy; // 位置精度
     //alert(JSON.stringify(res));
     
    
     $.get("http://apis.map.qq.com/ws/geocoder/v1/?location="+latitude+","+longitude+"&key={$mapkey}&get_poi=0&output=jsonp&callback=?",function(data) {
     console.log(data);
     if(data.status==0){
       var province = data.result.address_component.province;
     province = preg_replace('/市/',"",province);
     province = preg_replace('/省/',"",province);
     var city = data.result.address_component.city;
      city = preg_replace('/市/',"",city);
     var qu = data.result.address_component.district;
     $("#address1").val(province+" "+city+" "+qu);
     $("#address2").val(province+" "+city+" "+qu);
     
     }
     
    },'jsonp');   
      
    }
});

 });
</script>
<style>
.mui-btn-block{
  padding: 5px;
  border: 1px solid #ccc !important;
  margin: 5px;
  -webkit-appearance: none;
}

.fill-section {
    padding-left: 15px;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
}

.fill-section li {
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
}

.fill-section li:last-child {
    border-bottom: none;
}
.fill-type {
    float: left;
    line-height: 44px;
}

.customer-section .fill-type {
    width: 50px;
}

.customer-section .fill-section-right {
    margin-left: 50px;
}

.fill-phone-right {
    position: relative;
}

.fill-input {
    width: 100%;
    height: 44px !important;
    line-height: 38px !important;
    border: 0 !important;
    font-size: 14px;
    padding: 0 !important;
}

.customer-gender {
    border-top: 1px solid #f0f0f0;
    height: 44px;
}

.customer-gender-choice {
    float: left;
    width: 50%;
    height: 44px;
    line-height: 44px;
    padding-left: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.customer-gender-choice .i-circle {
    float: left;
    width: 16px;
    height: 16px;
    line-height: 16px;
    border: 1px solid #999;
    margin: 12px 8px 0 0;
}

.customer-gender-check .i-circle {
    width: 18px;
    height: 18px;
    line-height: 18px;
    border: 0;
    background-color: #ffd300;
    text-align: center;
    color: #6b450a;
    font-size: 14px;
    font-family: 'iconfonts';
}

.customer-gender-check .i-circle:before {
    content: '\e61a';
}

.address-section .fill-section-right {
    display: block;
    height: 44px;
    margin-left: 105px;
}

.addr-icon {
    float: left;
    margin-top: 10px;
    color: #888;
}

.addr-choose {
    display: block;
    padding: 0 !important;
    line-height: 44px !important;
    height: 44px !important;
    font-size: 13px;
    color: #333;
    border: 0 !important;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: auto !important;

}

.addr-arrow {
    float: right;
    margin: 16px 12px 0 0;
    width: 10px;
    height: 10px;
    border: 1px solid #ddd;
    border-width: 1px 1px 0 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}

.addr-save-btn {
    width: 93%;
    height: 44px;
    margin: 15px auto;
    background-color: #fff;
    color: #fa9700;
    font-size: 16px;
    line-height: 44px;
    text-align: center;
}

.addr-tip-list {
    position: absolute;
    left: 0;
    right: 0;
    top: 44px;
    z-index: 10;
    display: none;
    background-color: #f8f8f8;
    border: 1px solid #eaeaea;
}

.addr-tip-list li {
    height: 40px;
    padding: 3px 0 3px 3px;
    border-bottom: 1px solid #eaeaea;
}

.addr-tip-list li p {
    height: 40px;
    line-height: 40px;
    padding-left: 13px;
    color: #2f2f2f;
}

.addr-tip-list li.tip-selected p {
    height: 40px;
    background-color: #eaeaea;
}

.addr-tip-list li.tip-hide {
    display: none;
}
ul, ol {
    padding-left: 0;
    list-style-type: none;
}
</style>
<div id="content">
<header class="mui-bar mui-bar-nav" style="z-index:7">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">添加地址</h1>
</header>
<div class="mui-content ">
  <h5 style="margin:10px 5px;">联系人</h5>
  <div class="formbloack username" >
      <div class="label-wrap" >姓名</div>
      <div class="input-group-wrap" >
          <div class="input-wrap" > <input type="text" style="margin-bottom: 0;    padding-left: 0;" placeholder="收货人姓名" name="name" value="{$info.name}" > </div>
          <div class="input-wrap bottom" > <span class="form-radio" > <span class="radio-icon  {neq name='info.sex' value='2'}checked{/neq}" data-sex="1" ></span> 先生 </span> <span class="form-radio" > <span class="radio-icon {eq name='info.sex' value='2'}checked{/eq}" data-sex="2" ></span> 女士 </span>
          </div>
      </div>
  </div>

  <div class="formbloack phone" >
      <div class="label-wrap" >手机</div>
      <div class="input-group-wrap rightbtn">
          <div class="input-wrap" style="    padding: .173333rem 0;"> <input placeholder="收货人的手机号" type="tel" name="tel" value="{$info.tel}" style="margin-bottom: 0;    padding-left: 0;"> </div>
      </div>
  </div>
  <h5 style="margin:10px 5px;">收货地址</h5>

  <ul class="fill-section address-section">
    {eq name="$Think.cookie.address_type" value="1"}
      <li>
          <span class="fill-type">详细地址：</span>
          <div class="fill-section-right">
              <input type="text" class="fill-input j-house-number" name="address" placeholder="" value="{$info.address}" />
              <input type="hidden"  name="type" value='1' />
          </div>
      </li>
    {else/}
    <li>
        <span class="fill-type">小区/大厦/学校：</span>
        <a class="fill-section-right showmap" href="javascript:;">
            <i class="icon-loc-hollow addr-icon mui-icon mui-icon-location"></i>
            <i class="addr-arrow"></i>
            <input type="text" class="addr-choose j-address" name="address" readonly placeholder="点击选择(请耐心等待)" value="{$info.latlng ? $info.address : ''}" />
            <input type="hidden" class="addr-choose j-address" name="address_full" value="{$info.latlng ? $info.address_full : ''}" />
            <input type="hidden" class="addr-choose j-address" name="latlng" value='{$info.latlng} ' />
              <input type="hidden"  name="type" value='0' />
        </a>
    </li>
    <li>
        <span class="fill-type">楼号－门牌号：</span>
        <div class="fill-section-right">
            <input type="text" class="fill-input j-house-number" name="house_number" placeholder="例16号楼427室" value="{$info.house_number}" />
        </div>
    </li>

    <script type="text/javascript" src="//3gimg.qq.com/lightmap/components/locationPicker2/js/main-62c2e3b971.js"></script>
    
    <script type="text/javascript" src="https://apis.map.qq.com/tools/geolocation/min?key=QQ6BZ-24HC6-ZAXSZ-MTZAU-5MU2J-HEFEH&referer=鲜果屋"></script>
    
    <script>
    var geolocation = new qq.maps.Geolocation();
     var options = {timeout: 9000};
        var positionNum = 0;
        //iframe页面调用方法
        $(function(){
            $('.showmap').on('click', function(){
            	// alert("1111");
            	getCurLocation()
                $('#map').show()
                $('#content').hide()
            })


            adaptHeight();//动态适配高度

            window.onresize = function() { //横屏、QQ浏览器变全屏模式下的时候，需要重新计算高度
                adaptHeight();
            }

            window.addEventListener('message', function(event) {
                var loc = event.data;
                //  alert('你使用的组件是'+loc.module+',刚选择了'+loc.poiname+',它位于'+loc.poiaddress+',它的经纬度是：'+loc.latlng.lat+','+loc.latlng.lng+',所属城市为:'+loc.cityname)
                $('[name="address"]').val(loc.poiname)
                $('[name="address_full"]').val(loc.poiaddress)
                $('[name="latlng"]').val( loc.latlng.lat+','+loc.latlng.lng)

                $('#map').hide()
                $('#content').show()
                $('[name="house_number"]').focus()
            }, false);

            function adaptHeight() {
                var winH = $(window).height();
                var bodyH = document.documentElement.clientHeight;
                if (winH > bodyH) {
                    window.parent.document.getElementById("iframe").height=winH;
                } else {
                    window.parent.document.getElementById("iframe").height=bodyH;
                }
            }
            
            
            
            
 
        function getCurLocation() {
        	// alert("222");
            geolocation.getLocation(showPosition, showErr, options);
        }
        function showPosition(position) {
            positionNum ++;
            document.getElementById("demo").innerHTML += "序号：" + positionNum;
            document.getElementById("demo").appendChild(document.createElement('pre')).innerHTML = JSON.stringify(position, null, 4);
            document.getElementById("pos-area").scrollTop = document.getElementById("pos-area").scrollHeight;
        };
 
        function showErr() {
            positionNum ++;
            document.getElementById("demo").innerHTML += "序号：" + positionNum;
            document.getElementById("demo").appendChild(document.createElement('p')).innerHTML = "定位失败！";
            document.getElementById("pos-area").scrollTop = document.getElementById("pos-area").scrollHeight;
        };
 
        function showWatchPosition() {
            document.getElementById("demo").innerHTML += "开始监听位置！<br /><br />";
            geolocation.watchPosition(showPosition);
            document.getElementById("pos-area").scrollTop = document.getElementById("pos-area").scrollHeight;
        };
 
        function showClearWatch() {
            geolocation.clearWatch();
            document.getElementById("demo").innerHTML += "停止监听位置！<br /><br />";
            document.getElementById("pos-area").scrollTop = document.getElementById("pos-area").scrollHeight;
        };
        
        
        
        });
    </script>
    {/eq}
  </ul>
  <input type="hidden" value="{$info.id}" name="id" />
  <div class="form-button-wrap" > <button class="form-button" type="button" id="addAddress" >提 交</button> </div>

</div>
</div>
<div id="map"  style="display:none;">
  <!-- 通过 iframe 嵌入地图选点组件 -->
  <iframe name="地图坐标请等待" id="iframe" width="100%" frameborder=0 scrolling="no"
      src="http://apis.map.qq.com/tools/locpicker?search=1&type=1&policy=1&key=QQ6BZ-24HC6-ZAXSZ-MTZAU-5MU2J-HEFEH&referer=鲜果屋&coord={$Think.cookie.positioninit}">
  </iframe>
</div>
{/block}
{block name="script"}


<script type="text/javascript">


  $(function(){
    $('[name="first_area"]').change(function(){
      var $this = $(this),id = $this.val();
      $('[name="second_area"]').html(' ');
      $.post("{:url('index/index/getSecondArea')}", {
          "id": id
      }, function(data) {

        var html = template('tpl', data);
        $('[name="second_area"]').html(html);

      }, "json");
    })
    $('[name="first_area"]').change();

    $('.form-radio').click(function(){
      $(this).find('.radio-icon').addClass('checked')
      $(this).siblings().find('.radio-icon').removeClass('checked')
    })


    $('#addAddress').click(function(){
          var name = $.trim($('[name="name"]').val()),
              sex = $(".form-radio").find('.checked').attr('data-sex'),
              tel = $.trim($('[name="tel"]').val()),
              id = $('[name="id"]').val(),
              address= $.trim($('[name="address"]').val()),
              address_full= $.trim($('[name="address_full"]').val()),
              latlng= $.trim($('[name="latlng"]').val()),
              house_number= $.trim($('[name="house_number"]').val()),
              type =  $.trim($('[name="type"]').val())
         if(!name){
           mui.toast('请输入收货人姓名')
           return;
         }
         if (!tel) {
              mui.toast("请输入号码！");
              return;
          }
         if (!address) {
              mui.toast("请选择地址！");
              return;
          }
         if ($('[name="house_number"]').length > 0 && !house_number) {
              mui.toast("请填写楼号－门牌号！");
              return;
          }

         $.post("{:url('index/address/add')}", {
           "id": id,
           "name": name,
           "sex": sex,
           "tel": tel,
           "address": address,
           "address_full": address_full,
           "latlng": latlng,
           "house_number": house_number,
           "type": type
         }, function(data) {
             if(data.code == 1){
               setTimeout(function() {
                 //mui.back();
                 //self.location=document.referrer;
                 window.location.href= data.url
               }, 1000);
             }
             mui.toast(data.msg)
         }, "json");
    })

    //地址类型
    $('[name="type"]').click(function(){
      var val = $(this).val();
      if(val != 1){
        $('#sqdz').show()
      }else{
        $('#sqdz').hide()
      }
    })
  })
</script>



 


{/block}
